$(function () {
    function getStyle(obj, attr) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(obj, null)[attr];
        }
        return obj.currentStyle[attr];
    }


    var oGoodsL = document.querySelector(".goods-L")

    var oGoodsImg = document.querySelector(".goodsImg"); //小图
    var oMiddleArea = document.querySelector("#middleArea"); //小区域
    var oBigArea = document.querySelector("#bigArea"); //大区域
    var oBigImg = document.querySelector("#bigImg"); //大图

    oMiddleArea.style.width = parseInt(getStyle(oBigArea, "width")) / parseInt(getStyle(oBigImg, "width")) * parseInt(getStyle(oGoodsImg, "width")) + 'px';
    oMiddleArea.style.height = parseInt(getStyle(oBigArea, "height")) / parseInt(getStyle(oBigImg, "height")) * parseInt(getStyle(oGoodsImg, "height")) + 'px';

    //比例 移动的比例     大区域/小区域
    let oScale = parseFloat(getStyle(oBigArea, "width")) / parseFloat(getStyle(oMiddleArea, "width"))
    // console.log(oScale);
    //1.鼠标进入小图,就让小区域和大区域显示
    oGoodsImg.addEventListener("mouseenter", function () {
        oMiddleArea.style.display = "block";
        oBigArea.style.display = "block";

        document.onmousemove = function (evt) {
            var e = evt || window.event;
            var mX = e.pageX - oGoodsL.offsetLeft - oGoodsImg.offsetLeft - oMiddleArea.offsetWidth / 2;
            var mY = e.pageY - oGoodsL.offsetTop - oGoodsImg.offsetTop - oMiddleArea.offsetHeight / 2;
            if (mX <= 0) {
                mX = 0;
            }
            if (mX >= oGoodsImg.offsetWidth - oMiddleArea.offsetWidth) {
                mX = oGoodsImg.offsetWidth - oMiddleArea.offsetWidth;
            }

            if (mY <= 0) {
                mY = 0;
            }
            if (mY >= oGoodsImg.offsetHeight - oMiddleArea.offsetHeight) {
                mY = oGoodsImg.offsetHeight - oMiddleArea.offsetHeight;
            }
            oMiddleArea.style.left = mX + "px"
            oMiddleArea.style.top = mY + "px"

            oBigImg.style.left = oScale * mX * -1 + "px";
            oBigImg.style.top = oScale * mY * -1 + "px";
        }

    })
    //2.鼠标离开,就要隐藏
    oGoodsImg.addEventListener("mouseleave", function () {
        oMiddleArea.style.display = "none";
        oBigArea.style.display = "none";
        document.onmousemove = null;
    })

    var oSmall = document.querySelector(".smallImg");

    var oLis = document.querySelectorAll(".smallImg a");

    //点击换图

    oSmall.addEventListener("click", function (evt) {
        var e = evt || window.event;
        var ele = e.target || e.srcElement;
        if (ele.nodeName != 'IMG') {
            return
        }

        let clickLi = ele.parentNode;
        $(clickLi).parent('td').addClass('current').siblings().removeClass('current')
        var index = Array.from(oLis).findIndex(el => el == clickLi);
        oGoodsImg.children[0].children[0].setAttribute("src", `./images/详情页/goodsImg${index + 1}.jpg`);
        oBigImg.setAttribute("src", `./images/详情页/goodsImg${index + 1}.jpg`);
    })
})
